'use client';

import { useEffect, useState } from 'react';
import { Spin } from 'antd';

export default function Loading() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(true);
    },300); // 延迟300ms显示

    return () => clearTimeout(timer);
  }, []);

  if (!show) {
    return null;
  }

  return (
    <div style={{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      background: 'rgba(255, 255, 255, 0.65)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      opacity: 0,
      animation: 'fadeInOut 0.3s ease forwards'
    }}>
      <style jsx>{`
        @keyframes fadeInOut {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }

        :global(div[data-nextjs-loading-state="loading"]) {
          animation: fadeOut 0.3s ease forwards;
        }

        @keyframes fadeOut {
          from {
            opacity: 1;
          }
          to {
            opacity: 0;
          }
        }
      `}</style>
      <div style={{
        padding: '30px',
        borderRadius: '12px',
        background: 'rgba(255, 255, 255, 0.8)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
      }}>
        <Spin size="large" />
      </div>
    </div>
  );
} 